<template>
    <div class="border fs-14">
        <div class="header border-bottom pd-b-10 bold">
            添加保司方案
        </div>
        <div class="pd-16">
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="left" label-width="100px" class="">
                <template v-for="(i, index) in formData" :key="index">
                    <el-form-item v-if="!i.hide" :label="`${i.label}：`" :prop="`${i.prop}.value`">
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" :readonly="i.readonly" />
                        <el-select v-if="i.type === 'select'" v-model="i.value" :placeholder="i.placeholder" class="w-full"
                            @focus="i.handleFocus && i.handleFocus(i)" @change="(val) => i.handleChange(val, i)"
                            :disabled="i.disabled">
                            <el-option v-for="(item, idx) in i.options" :key="idx" :label="item[i.defaultAttrs.label]"
                                :value="item[i.defaultAttrs.value]" />
                        </el-select>
                    </el-form-item>
                </template>
                <div class="flex items-center mg-b-10">
                    <div>系统自动生成方案编码：</div>
                    <div>
                        <el-switch v-model="isSysgen" @change="handleSwitchChange" />
                    </div>
                </div>
            </el-form>
            <div class="flex flex-jc-c mg-t-10">
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="handleClear">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { addScheme } from 'api/insure/longTerm.ts'
const props = defineProps({
    curItem: {
        type: Object
    },
    curPlan: {
        type: Object
    }
})
const emits = defineEmits(['success'])

const isSysgen = ref(true)
const formRef = ref(null)

const formData = ref({
    schemeName: {
        label: '方案名称',
        prop: 'schemeName',
        subProp: 'solutionName',
        type: 'input',
        placeholder: '请输入方案名称',
        inputType: 'text',
        value: '',
        disabled: false,
        readonly: true
    },
    price: {
        label: '方案金额',
        prop: 'price',
        subProp: '',
        type: 'select',
        options: [
            {
                label: '30万',
                value: '30W'
            }, {
                label: '50万',
                value: '50W'
            }, {
                label: '80万',
                value: '80W'
            }, {
                label: '100万',
                value: '100W'
            }, {
                label: '120万',
                value: '120W'
            }
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: '',
        disabled: false,
        handleChange: (val, item) => {
            if (val) {
                const filter = item.options.find(i => i.value === val)
                formData.value.schemeName.value = props.curItem.name + filter.label
            } else {
                formData.value.schemeName.value = props.curItem.name
            }
        }
    },
    schemeType: {
        label: '方案类型',
        prop: 'schemeType',
        subProp: 'solutionType',
        type: 'select',
        options: [
            {
                label: '灵活保单',
                value: 21
            },
            {
                label: '月保单',
                value: 22
            },
            {
                label: '即时生效',
                value: 23
            }
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: '',
        disabled: false,
        handleChange: (item) => {
        }
    },
    riskGrade: {
        label: '风险等级',
        prop: 'riskGrade',
        type: 'select',
        options: [
            {
                label: '5类',
                value: 'F'
            },
            {
                label: '非5类',
                value: 'N'
            }
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: '',
        disabled: false,
        handleChange: (item) => {
        }
    },
    solutionCode: {
        label: '方案编码',
        prop: 'solutionCode',
        type: 'input',
        hide: true,
        placeholder: '请输入方案编码',
        inputType: 'text',
        value: '',
        disabled: false,
        hide: true
    },
})

const rules = ref({
    'price.value': [
        {
            required: true,
            trigger: 'change',
            message: '方案金额不能为空'
        }
    ],
    'schemeType.value': [
        {
            required: true,
            trigger: 'change',
            message: '方案类型不能为空'
        }
    ],
    'riskGrade.value': [
        {
            required: true,
            trigger: 'change',
            message: '风险等级不能为空'
        }
    ],
    'solutionCode.value': [
        {
            required: true,
            trigger: 'blur',
            message: '方案编码不能为空'
        }
    ],
})

const handleSwitchChange = (ev) => {
    formData.value.solutionCode.hide = ev
}

const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            doAddScheme()
            // console.log(getQueryData());
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const doAddScheme = () => {
    const data = {
        ...getQueryData(),
        ...props.curItem
    }
    addScheme(data).then(res => {
        emits('success')
        const text = '新增成功'
        ElMessage.success({
            message: text
        })
        handleClear()
    })
}

const getQueryData = () => {
    const data = {
        isSysgen: isSysgen.value
    }
    for (const key in formData.value) {
        data[formData.value[key].prop] = formData.value[key].value
    }
    return data
}

const handleClear = () => {
    formRef.value.resetFields()
}

watch(props, (newval) => {
    if (newval.curPlan) {
        for(const key in formData.value) {
            console.log(key, newval.curPlan)
            formData.value[key].value = newval.curPlan[formData.value[key].prop] || newval.curPlan[formData.value[key].subProp]
        }
    } else {
        formData.value.schemeName.value = newval.curItem.name
    }
}, {
    immediate: true,
    deep: true
})

// watch(() => props.curItem, (newval) => {
//     if (newval && Object.keys(newval)?.length) {
//         formData.value.schemeName.value = newval.name
//     }
// }, {
//     immediate: true,
//     deep: true
// })

// watch(() => props.curPlan, (newval) => {
//     console.log(678, newval);
// }, {
//     immediate: true,
//     deep: true
// })
</script>
<style lang="scss" scoped>
.header {
    padding: 12px 16px;
}

.border {
    border: 1px solid #EAEAEF;
    border-radius: 5px;
}

.pd-16 {
    padding: 16px;
}
</style>